<template>
  <div class="page-order">
    <el-row>
      <el-col
        :span="4"
        class="navbar hidden-xs-only"
      >
        <h3>我的美团</h3>
        <dl>
          <dd>我的订单</dd>
          <dt>全部订单<i class="el-icon-arrow-right" /></dt>
          <dt>代付款<i class="el-icon-arrow-right" /></dt>
          <dt>待使用<i class="el-icon-arrow-right" /></dt>
        </dl>
        <dl>
          <dd>个人信息</dd>
          <dt>账户设置<i class="el-icon-arrow-right" /></dt>
        </dl>
      </el-col>
      <el-col
        :span="19"
        class="table"
      >
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="全部订单"
            name="all"
          >
            <List :cur="cur" />
          </el-tab-pane>
          <el-tab-pane
            label="待付款"
            name="unpay"
          >
            <List :cur="cur" />
          </el-tab-pane>
          <el-tab-pane
            label="待使用"
            name="unuse"
          >
            <List :cur="cur" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div class="pay">
      <el-button v-if="cur.length" type="primary" round @click="handlePay">
        付款
      </el-button>
    </div>
  </div>
</template>

<script>
import List from '@/components/order/list.vue'
export default {
  components: {
    List
  },
  data() {
    return {
      activeName: 'all',
      list: [],
      cur: []
    }
  },
  watch: {
    activeName(val) {
      this.cur = this.list.filter((item) => {
        if (val === 'unpay') {
          return item.status === 0
        } else if (val === 'unuse') {
          return item.status === 1
        } else if (val === 'all') {
          return true
        } else {
          return false
        }
      })
    },
    list() {
      const val = this.activeName
      this.cur = this.list.filter((item) => {
        if (val === 'unpay') {
          return item.status === 0
        } else if (val === 'all') {
          return true
        } else {
          return false
        }
      })
    }
  },
  async asyncData(ctx) {
    const { status, data: { code, list } } = await ctx.$axios.post('/order/getOrders', {
      id: ctx.query.id
    })
    if (status === 200 && code === 0 && list.length) {
      return {
        list: list.map((item) => {
          return {
            img: item.imgs.length ? item.imgs[0] : '/logo.png',
            name: item.name,
            count: item.count || 1,
            total: item.total,
            status: item.status,
            statusText: item.status === 0 ? '待付款' : '已付款',
            id: item.id
          }
        }),
        cur: list.map((item) => {
          return {
            img: item.imgs.length ? item.imgs[0] : '/logo.png',
            name: item.name,
            count: item.count || 1,
            total: item.total,
            status: item.status,
            statusText: item.status === 0 ? '待付款' : '已付款',
            id: item.id
          }
        })
      }
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    },
    async handlePay() {
      const { status, data: { code } } = await this.$axios.post('/order/pay')
      if (status === 200 && code === 0) {
        this.$router.go(0)
      }
    }
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/order/index.scss";
</style>
